@charset "utf-8";
/* CSS Document */

/* 边距、补白和边界宽度都设置为0，当有溢出的时候设置为自动*/
body {
	margin:0;
	border:0;             
	padding:0;
	font-family:arial, verdana, sans-serif;
	overflow:auto;
	background:#e9e4ce;
}
/*margin-top:-45px的用意是：因为图片是经过ps处理过的，其羽化太多，故使其向上平移45个像素。
position:relative的用意是：便于容器内部的绝对定位*/
.content {
	width:1280px;
	height:800px;
	background:url(../images/background2.jpg) no-repeat;
	margin:0 auto;
	margin-top:-45px;
	position:relative;
}
/*position:absolute是绝对定位，离顶部的高度是166px，离左边的具体是166px*/
.logo {
	position:absolute;
	top:184px;
	left:145px;
	height:143px;
	width:404px;
	background:url(../images/classname.gif);
}
/*nav_bg是作为nav的背景，如果直接给nav添加背景，会因opacity等的透明效果而使nav内部所有元素都变得透明，
这不是我们多希望的，故多加一个nav_bg起到保护nav呈现于是模样的作用*/
.nav ,.nav_bg{
	position:absolute;
	top:452px;
	left:7px;
	height:96px;
	width:660px;
	z-index:3;
}
/*-moz-opacity:.2;opacity:0.2;filter:alpha(opacity=20);这三句话利用的是Hack技术，为的是保证透明效果在格格浏览器都能够兼容*/
.nav_bg { 
	background:url(../images/button_base.png) no-repeat;
	top:505px;
	left:45px;
}
/*下面我用到的是float：right而不是left，为的是更好的控制li的排列*/
.nav a,.nav_name li {
	margin-right:15px;
	float:right;
	width:86px;
	height:86px;
}
/*a:hover是伪类，当鼠标停留或者经过nav的时候，图片移到有色图案。因为鼠标经过能够点亮的那几张图片，我用的是两张一样的图片合成的
86*86的图片我合成为172*86的左亮右黑白的图片，把这个图片作为背景放置在86*86的容器内，鼠标没有经过时显示的是黑白的，当鼠标经过的时候，
利用background—position这个属性使背景向左平移86px，从而达到目的*/
.nav a:hover,.nav a:active { background-position:0 0;}
.img_1 { background:url(../images/link_2p.png) -86px 0;}
.img_2 { background:url(../images/album_2p.png) -86px 0; }
.img_3 { background:url(../images/bulletin_2p.png) -86px 0; }
.img_4 { background:url(../images/chat_2p.png) -86px 0; }
.img_5 { background:url(../images/contact_2p.png) -86px 0; }
.img_home { background:url(../images/home.png) }
/*没有把nav和nav_name合并到一起的原因是，我们想当鼠标经过图片时，他们所对应的名字将会同时出现，这就要求把而这分开放置。
z-index的作用是防止map这个图层覆盖nav及nav-name的内容*/
.nav_name {
	position:absolute;
	top:546px;
	left:4px;
	height:37px;
	width:660px;
	z-index:3
}
.nav_name img { display:none;}
/*保证nav-name li中的文字居中*/
.nav_name li {
	list-style:none;
	text-align:center;
}
/*利用绝对定位确定页面右边的那张图片位置*/
.map {
	position:absolute;
	top:94px;
	right:-16px;
	width: 691px;
	height: 637px;
	
}
/******************************************实现右上方的两个小标签***********************************/
#our_label{
	width:232px;
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	right:100px;
	list-style: none;
    z-index:999999;
}
/*其属性设置为fixe，他将会跟着滚动条一起运动*/
#our_label li {
    width: 108px;
    display:inline;
    float:left;    
}
#our_label a {
	width:116px;
	height:120px;
	display: block;
    float:none;
	text-decoration:none;
	text-align:center;
}
/*display设置为block可以使鼠标经过那一块的时候，都会有链接*/
.about_us a{background:url(../images/about_us.png) no-repeat;}
.contact_us a{background:url(../images/contact_us.png) no-repeat;}
/******************************************实现右上方的两个小标签***********************************/
